<template>
	<view class="page-wrapper linear-back">
		<view class="head-row">
            <up-icon class="icon" name="bell" size="20" @click="navigateToUniPage('/pages/message/index')"></up-icon>
            <up-icon class="icon" name="plus" size="20" color="#15B8A6" @click="toAddDevice"></up-icon>
		</view>
		
		<image src="/static/images/banner/1.png" mode="aspectFill" class="banner-image"></image>
		
		<view class="label-wrapper">
            <view class="text">
			    {{ $t('pages.index.device_title') }}
            </view>
            <uni-icons type="plus-filled" size="20" color="#15B8A6" @click="toAddDevice"></uni-icons>
		</view>
		
		<view class="empty-device" v-if="deivceList.length==0">
			<text>{{ $t('pages.index.empty_desc_text') }}</text>
			<up-button @click="toAddDevice" icon="plus" :text="$t('pages.index.empty_btn_text')" plain size="mini" type="primary" style="width: 220rpx;" shape="circle">
            </up-button>
		</view>
		
		<view class="device-grid" v-else>
			<view class="item" v-for="device in deivceList" :key="device.id" >
				<image @click="toDeviceDetail(device)" :src="device.deviceimg" mode="aspectFit" class="image"></image>
				<view @click="toDeviceDetail(device)" class="info">
					<view>{{ device.title }}</view>
					<view class="desc">{{ device.imei.toUpperCase() }}</view>
				</view>
				<view class="operate-box">
					<up-tag :text="$t('common.online')" v-if="device.online==1" type="primary" shape="circle" size="mini"></up-tag>
					<up-tag :text="$t('common.offline')" v-else type="info" shape="circle" size="mini"></up-tag>
					<up-icon name="trash-fill" color="#dd6161" @click="removeDeivce(device.id)"></up-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		toLoginPage, navigateToUniPage,
	} from '@/utils/index.js';
	import {
		getSheBeiListApi,
		removeDeviceApi
	} from "@/api/request";	
	import { ref, } from 'vue';
    import {
		useI18n
	} from 'vue-i18n';
	import {
		onShow,
	} from "@dcloudio/uni-app"
	
    const { t } = useI18n();
	// 设备列表
	const deivceList = ref([]);
	
	// 添加设备
	const toAddDevice = ()=>{
		navigateToUniPage('/pages/configDevice/index')
	}
	
	// 获取设备数据
	const fetchData = async () => {
		let res = await getSheBeiListApi()
		 
		if (res.response.result == true) {
			deivceList.value = res.list.map(el=>({
				...el,
				deviceimg: el.deviceimg||'/static/global/shebei.png',
			}));

			// 默认订阅第一个
			let obj = res?.list?.[0];
			obj&&uni.$emit('addTopic', obj)
		} else {
			deivceList.value = []
			uni.showToast({
				title: res.response.msg,
				icon: 'none'
			})
		}
	}
	
	const toDeviceDetail = (device)=>{
		uni.$emit('addTopic', {
			imei: device.imei
		});
		if(device.dtype==2){			
			return navigateToUniPage(`/pages/machine/water?id=${device.id}&imei=${device.imei}&title=${device.title}&img=${encodeURIComponent(device.deviceimg)}`);
		}
		return navigateToUniPage(`/pages/machine/index?id=${device.id}&imei=${device.imei}&title=${device.title}&img=${encodeURIComponent(device.deviceimg)}`);
	}
	
	// 删除设备
	const removeDeivce = (id)=>{
		return uni.showModal({
			content: t('pages.index.delete_confirm_text'),
			cancelText: t('common.cancel'),
			confirmText: t('common.confirm'),
			async success(result) {
				if(result.cancel){
					return;
				}				
				let res = await removeDeviceApi(id); // 调用删除接口					 
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				if (res.response.result == true) {
					deivceList.value = deivceList.value.filter(item => item.id != id)
					// 发送删除指令 todo
					uni.$emit('delcmd', '')					
				}										
			}
		});
	}
	
	onShow(() => {
		fetchData()
	})
</script>

<style lang="scss" scoped>
	.page-wrapper{
		padding: 30rpx 32rpx;
		padding-top: 100rpx;	
		box-sizing: border-box;
		overflow-y: auto;
	}
	
	.head-row{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		.icon-list{
			display: inline-flex;
			column-gap: 12rpx;			
		}
		.icon{
			background-color: #FFFFFF;
			border-radius: 50%;
			box-sizing: border-box;
			width: 80rpx;
			height: 80rpx;
			color: #4B5563;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
		}
	}
	
	.banner-image{
		width: 686rpx;
		height: 360rpx;
		border-radius: 40rpx;
		display: block;
		margin: 40rpx auto;
	}
			
	.label-wrapper{
		padding: 0 18rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
        justify-content: space-between;
        .text{
            display: flex;
		    align-items: center;
            &::before{
                content: '';
                display: inline-block;
                margin-right: 6rpx;
                width: 8rpx;
                height: 1em;
                background-color: $uni-primary;
            }
        }
				
		
	}
	
	.empty-device{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		row-gap: 22rpx;
		font-size: 24rpx;
        border: 4rpx dotted #E5E7EB;
        border-radius: 40rpx;
        margin-top: 80rpx;
	}
	
	.device-grid{		
		margin-top: 30rpx;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-auto-rows: 450rpx;
		row-gap: 40rpx;
		column-gap: 32rpx;
		justify-items: stretch;
		align-items: stretch;
		.item{
			padding: 10rpx 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
            box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1);
			.image{
				width: 260rpx;
				height: 260rpx;
				display: block;
				margin-bottom: 6rpx;
			}
			.info{
				text-align: center;
				font-size: 28rpx;				
				.desc{
					font-size: 24rpx;
				}
			}
			.operate-box{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
			}
			
		}
	}
</style>